<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'CallbackProperty',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            const viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                }),
                shouldAnimate: true,//开启动画
            });
            viewer.scene.globe.depthTestAgainstTerrain = true;

            const startLatitude = 35;
            const startLongitude = -120;
            let endLongitude;
            const startTime = Cesium.JulianDate.now();

            const redLine = viewer.entities.add({
                polyline: {
                    positions: new Cesium.CallbackProperty(function (time, result) {
                        endLongitude =
                            startLongitude +
                            0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
                        return Cesium.Cartesian3.fromDegreesArray(
                            [startLongitude, startLatitude, endLongitude, startLatitude],
                            Cesium.Ellipsoid.WGS84,
                            result
                        );
                    }, false),
                    width: 5,
                    material: Cesium.Color.RED,
                },
            });
            
            const label = viewer.entities.add({
                position: new Cesium.CallbackProperty(getMidpoint, false),
                label: {
                    text: new Cesium.CallbackProperty(getLength, false),
                    font: "20px sans-serif",
                    pixelOffset: new Cesium.Cartesian2(0.0, 20),
                },
            });
            viewer.trackedEntity = label


            const startCartographic = Cesium.Cartographic.fromDegrees(
                startLongitude,
                startLatitude
            );
            let endCartographic = new Cesium.Cartographic();
            const scratch = new Cesium.Cartographic();
            const geodesic = new Cesium.EllipsoidGeodesic();

            function getMidpoint(time, result) {
                const endPoint = redLine.polyline.positions.getValue(time, result)[1];
                endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
                geodesic.setEndPoints(startCartographic, endCartographic);
                const midpointCartographic = geodesic.interpolateUsingFraction(
                    0.5,
                    scratch
                );
                return Cesium.Cartesian3.fromRadians(
                    midpointCartographic.longitude,
                    midpointCartographic.latitude,
                    5
                );
            }

            function getLength(time, result) {
                const endPoint = redLine.polyline.positions.getValue(time, result)[1];
                endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
                geodesic.setEndPoints(startCartographic, endCartographic);
                const lengthInMeters = Math.round(geodesic.surfaceDistance);
                return `${(lengthInMeters / 1000).toFixed(1)} km`;
            }
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  